<template>
	<div class="wrapper">
		<swiper :options="swiperOption" v-if="swiperShow">
		    <swiper-slide v-for="item of list" :key="item.id">
		    	<img class="swiper-img" :src="item.imgUrl">
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
	  	</swiper>
	</div>
</template>

<script>
export default {
	name: 'HomeSwiper',
	props: {
		list: Array
	},
	data () {
		return {
			swiperOption: {
				pagination: '.swiper-pagination',
				loop: true
			}
		}
	},
	computed: {
		swiperShow () {
			return this.list.length
		}
	}
}
</script>

<style lang='stylus' scoped>

	.wrapper >>> .swiper-pagination-bullet-active
		background-color: #fff
	.wrapper
		clear: both
		width: 100%
		height: 0
		padding-bottom:31.25%
		/**
		 * 1.scoped只修饰当前组件上的样式,不会影响到其他组件
		 * 2.>>>样式穿透不受scope限制
		 * 3.高度会按着宽度的31.25%的百分比来显示
		 * */
		.swiper-img
			width: 100%
</style>